<template>
  <div class="outer">
    <!-- 
      - 作用域插槽的使用
       - 在某个template中 :v-slot:slotName='obj',obj就是拿到slot中传递过来的数据组成的对象
       - 一般使用解构的形式直接拿到值
     -->
    <Tab title='美食'>
      <template #content='{msg,sex}'>
        <ol>
          <li v-for='item in msg' :key='item'>{{item}}{{sex}}</li>
        </ol>
      </template>
    </Tab>
    <Tab title='游戏'>
      <template #content='{msg}'>
        <ul>
          <li v-for='item in msg' :key='item'>{{item}}</li>
        </ul>
      </template>
    </Tab>
    <Tab title='电影'>
      <template #content='{msg}'>
        <h1>
          <li v-for='item in msg' :key='item'>{{item}}</li>
        </h1>
      </template>
    </Tab>
  </div>
</template>

<script>
import Tab from './components/Tab.vue'

export default {
  name:'App',
  components:{
    Tab
  }
}
</script>

<style>
  .outer{
    display: flex;
    justify-content: space-around;
    background: pink;
  }
</style>